<template>
  <div class="box">
    <div class="user_img"><img src="http://rco8i11co.hn-bkt.clouddn.com/login_user.png"
           style="width: 90vw;height: 500rpx;"
           alt="" /></div>
    <div class="user_title flex_box"
         style="margin: 60rpx 0;">
      <div class="flex_xbox flex_left_text"
           style="font-size:50rpx; font-weight: bold;">鹤鸣</div>
      <div class="flex_xbox"
           style="justify-content: flex-end;">
        <div style="height: 50rpx; line-height: 50rpx;  margin-top: 15rpx;">
          <lxc-count @handleCount="handleCountClick"
                     :value="1"
                     :delayed="100"></lxc-count>
        </div>
      </div>
    </div>
    <div class="user_title flex_box">
      <div class="flex_xbox flex_left_text">艺术家</div>
      <div class="flex_xbox"
           style="justify-content: flex-end;">
        <div>
          <img src="http://rco8i11co.hn-bkt.clouddn.com/login_user.png"
               alt=""
               style=" background-size: cover;
          width: 50rpx;
          height: 50rpx;
          border-radius: 50%;
          border: 1px solid black;" />
        </div>

        <div style="height: 50rpx; line-height: 80rpx; margin-left: 20rpx;">123</div>
      </div>
    </div>
    <div class="user_name">
      <div class="flex_box">
        <div class="flex_xbox flex_left_text">系列</div>
        <div class="flex_xbox"
             style="justify-content: flex-end;">旱地诗篇</div>
      </div>
      <div class="flex_box">
        <div class="flex_xbox flex_left_text">合约地址</div>
        <div class="flex_xbox"
             style="justify-content: flex-end;">0X8673</div>
      </div>
      <div class="flex_box">
        <div class="flex_xbox flex_left_text">认证标识</div>
        <div class="flex_xbox"
             style="justify-content: flex-end;">0X8673</div>
      </div>
      <div class="flex_box">
        <div class="hr"></div>
      </div>
      <div class="flex_box">
        <div class="flex_xbox flex_left_text">1件商品,总商品金额：</div>
        <div class="flex_xbox"
             style="justify-content: flex-end;">￥2,500.00</div>
      </div>
      <div class="flex_box">
        <div class="flex_xbox flex_left_text">第三方应付总额</div>
        <div class="flex_xbox"
             style="justify-content: flex-end; color: red;">￥2,500.00</div>
      </div>
      <div class="flex_box">
        <div class="flex_xbox flex_left_text">支付方式</div>
        <div class="flex_xbox"
             style="justify-content: flex-end;">支付宝</div>
      </div>
    </div>
    <div class="btn_button">
      <div class="flex_box">
        <div class="flex_xbox flex_left_text">
          <navigator url="/pages/commodity/commodity"><button class="btn"
                    style="background-color: darkgrey;">返回详情</button></navigator>
        </div>

        <div class="flex_xbox"
             style="justify-content: flex-end;">
          <navigator url="/pages/Payment/Payment"><button class="btn"
                    style="background-color: red; color: white;">立即支付</button></navigator>
        </div>
      </div>
    </div>
    <div class="btn_text flex_box">
      <p style="word-wrap: break-word;
	word-break: break-all;">
        如遇到该上架今日累计收款已超限额，请改天再付的问题，可重复进行下单支付
      </p>
    </div>
  </div>
</template>

<script>
import lxcCount from '@/components/lxc-count/lxc-count.vue'
export default {
  data() {
    return {}
  },
  methods: {},
}
</script>

<style lang="less" scoped>
.box {
  margin: 0px;
  padding: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  .flex_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .flex_xbox {
      width: 45vw;
      height: 100rpx;
      //   border: 1rpx solid red;
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;
      line-height: 100rpx;
      .btn {
        border: none;
        width: 40vw;
        height: 80rpx;
        border-radius: 35rpx;
        font-size: 30rpx;
        line-height: 80rpx;
        text-align: center;
      }
    }
    .flex_left_text {
      font-size: 30rex;
      color: rgb(85, 83, 83);
    }
    .hr {
      margin: 25px 0;
      width: 90vw;
      height: 1px;
      background-color: rgb(143, 143, 143);
    }
  }
  .user_name {
    width: 90vw;
  }
  .user_img {
    width: 90vw;
    height: 500rpx;
  }
  .btn_text {
    width: 90vw;
    font-size: 20rpx;
  }
}
</style>
